import React from 'react'
import axios from 'axios'
import NavHeader from '../../components/NavHeader';

// 导入样式
import './index.css'
import { Toast } from 'antd-mobile';

// 导入BASE_URL
import {BASE_URL} from '../../utils/url'

// 解决脚手架全局变量访问问题
const  BMap = window.BMapGL

// 覆盖物样式
const labelStyle = {
    cursor: 'pointer',
    border: '0px solid rgb(255,0,0)',
    padding:'0px',
    whiteSpace:'nowrap',
    fontSize:'12px',
    color:'rgb(255,255,255)',
    textAlign:'center'
}

// 3、
export default class Map extends React.Component {
    // 创建覆盖物
    createOverlays(data,zoom,type) {
        const {
            coord:{longitude,latitude},
            label:areaName,
            count,
            value
        } = data
        const areaPoint = new BMap.Point(longitude,latitude)
        if(type === 'circle') {
            // 区或镇
            this.createCircle(areaPoint,areaName,count,value)
        } else {
            // 区
            this.createRect()
        }
    }
    createCircle(point,name,count,id,zoom){

    }
    createRect(){}
    renderOverlays() {
        Toast.loading('加载中', 0, null, false)
        const res = axios.get(`http://localhost:3000/area/map?id=666`)
        Toast.hide()
        // const data = res.data.body
        // 调用 getTypeAndZoom 获取级别和类型
        const {nextZoom,type} = this.getTypeAndZoom()
        // data.forEach(item =>{
        //     // 创建覆盖物
        //     this.createOverlays(item,nextZoom,type)
        // })
        this.getTypeAndZoom()
    }
    getTypeAndZoom() {
        // 调用地图的getZoom方法，来获取当前缩放级别
        const zoom = this.map.getZoom()
        let nextZoom,type
        if(zoom >= 10 && zoom < 12) {
            // 区
            // 下一个缩放级别
            nextZoom = 13
            // circle 标识绘制原型的覆盖物(区、镇)
        } else if(zoom >= 12 && zoom < 14) {
            // 镇
            nextZoom = 15
            type = 'circle'
        } else if (zoom >= 14 && zoom < 16) {
            // 小区
            type = 'rect'
        }
        return {
            nextZoom,
            type
        }
    }
    render(){
        return (
            <div className="map">
                <NavHeader
                //  onLeftClick={() => {
                //      console.log('点击了左侧按钮');
                //  }}
                >
                    地图找房
                </NavHeader>
                {/* 地图容器 */}
                <div id="container" />
            </div>
        )
    }
    componentDidMount() {
        /*
        1 获取当前定位城市
        2 使用地址解析器当前城市坐标
        3 调用 centerAndZoom() 方法在地图中展示当前城市，并设置缩放级别为11
        4 在地图中展示该城市，并添加比例尺和缩放控件
        */

        // const {label,value} = JSON.parse(localStorage.getItem('rentHouse'))
        // // 创建地址解析器实例
        // const myGeo = new BMap.Geocoder();
        // // 将地址解析结果显示在地图上，并调整地图视野
        // myGeo.getPoint(label, (point)=>{
        //     if(point){
        //         map.centerAndZoom(point, 16);
        //         map.addOverlay(new BMap.Marker(point))
        //     }
        // }, label)
       
        // 初始化地图实例
        // 注意: 在react脚手架中全局对象需要使用window来访问，否则会造成eslint校验错误
        var map = new BMap.Map("container");
        // 作用：能够在其它方法中通过this来获取
        this.map = map
        // 设置中心点坐标
        var point = new BMap.Point(116.404, 39.915);
        // 初始化地图
        map.centerAndZoom(point, 11)

        // 添加常用控件
        var zoomCtrl = new BMap.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);
        var scaleCtrl = new BMap.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);

        this.renderOverlays()

        /*
        创建label实例对象
        调用setStyle()方法设置样式
        在map对象上调用addOverlay()方法，将文本覆盖物添加到地图中
        */
       const opts = {
           position:point,
           offset:new BMap.Size(-35,-35)
       }

       /*
        1 获取房源数据
        2 遍历数据，创建覆盖物，给每个覆盖物添加唯一标识
        3 给覆盖物添加单击事件
        4 在点击事件中，获取到当前项的唯一标识
        5 放大地图(级别为13)，调用clearOverlays()清除当前覆盖物
       */
      const res = axios.get(`http://localhost:3000/area/map?id=${666}`)
    //   res.data.body.forEach(item=>{
    //       // 为每一条数据创建覆盖物
    //   })


       // 说明：设置setContent后，第一个参数中设置的文本会失效
       const label = new BMap.Label('文本覆盖物',opts)

       // 设置房源覆盖物内容
       label.setContent(`
            <div class="bubble">
                <p class="name">西陵区</p>
                <p>6套</p>
            </div>
       `)

       // 设置样式
       label.setStyle(labelStyle)

       // 添加单击事件
       label.addEventListener('click',()=>{
           console.log('房源被点击了');
       })

       // 添加覆盖物到地图中
       map.addOverlay(label)
    }
}